<template>
    <div>
        <div align="center">
            <el-form style="background-color:#eef1f6;width: 80%;height:40px;" align="left" class="one">
                筛选查询
            </el-form>
            <el-form  :inline="true" class="demo-form-inline" style="width: 80%;">
                <el-form-item>
                    业务号：
                </el-form-item>
                <el-form-item>
                    <el-input v-model="byte.lbusinessId" placeholder="业务号"></el-input>
                </el-form-item>
                <el-form-item>
                    申请人：
                </el-form-item>
                <el-form-item>
                    <el-input v-model="byte.lname" placeholder="申请人"></el-input>
                </el-form-item>
                <el-form-item>
                    时间：
                </el-form-item>
                <el-form-item>
                    <el-input v-model="byte.createTime" placeholder="申请时间"></el-input>
                </el-form-item>
                <!--                <el-form-item>-->
                <!--                    <el-input v-model="byte.roleId" placeholder="申请时间"></el-input>-->
                <!--                </el-form-item>-->
                <el-form-item>
                    <el-button @click="queryemp" type="success">查询</el-button>
                </el-form-item>
            </el-form>
        </div>

        <br>

        <div align="center">
            <!--             <el-table :data="tableData" border>-->
            <el-table
                    :data="
                tableData.slice((pageNum - 1) * pageSize, pageNum * pageSize)
               "
                    border
                    style="width: 80%"
                    :header-cell-style="{background:'#eef1f6',color:'#606266'}">
                <el-table-column prop="lbusinessId" label="业务号"></el-table-column>
                <el-table-column prop="lname" label="申请人"></el-table-column>
                <el-table-column prop="ltypeId" label="身份证号"></el-table-column>
                <el-table-column prop="lphone" label="联系电话"></el-table-column>
                <el-table-column prop="createTime" label="申请时间"></el-table-column>
                <el-table-column prop="roleName" label="代办角色"></el-table-column>
                <el-table-column label="业务类型">
                    <template v-slot="s">
                        {{ Text2[s.row.lbusiness - 1] }}
                    </template>
                </el-table-column>
                <el-table-column label="状态">
                    <template v-slot="s">
                        {{ Text[s.row.lstate - 1] }}
                    </template>
                </el-table-column>

                <el-table-column label="操作">
                    <template slot-scope="s">
                        <el-button v-show="s.row.lstate==1" type="primary" @click="sl(s.row)">受理</el-button>
                        <el-button v-show="s.row.lstate==2" type="warning" @click="gongshi(s.row)">公示</el-button>
                        <el-button v-show="s.row.lstate==3" type="primary" @click="shencha(s.row)">审查</el-button>
                        <el-button v-show="s.row.lstate==4" type="warning" @click="lianshen(s.row)">联审联办</el-button>
                        <el-button v-show="s.row.lstate==5" type="primary" @click="shenpi(s.row)">审批</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>


        <!--<el-dialog title="申请详情" :visible.sync="shou" :close-on-click-modal="false" fullscreen>

            <p>申请户主信息</p>
            <el-table :data="shoudata" border>
                <el-table-column prop="bname" label="姓名"></el-table-column>
                <el-table-column label="性别">
                    <template v-slot="s">
                        {{ sex[s.row.bsex] }}
                    </template>
                </el-table-column>
                <el-table-column prop="age" label="年龄">
                    <template v-slot="s">
                        {{getAge(s.row.bbirthday)}}
                    </template>
                </el-table-column>
                <el-table-column prop="btypeId" label="身份证号"></el-table-column>
                <el-table-column prop="bphone" label="联系电话"></el-table-column>
                <el-table-column prop="baddress" label="户口所在地"></el-table-column>
            </el-table>-->

           <!-- <p>家庭成员</p>
            <el-table :data="shoudata" border>
                <el-table-column prop="customerRelatives.reName" label="姓名"></el-table-column>
                <el-table-column prop="reage" label="年龄">
                    <template v-slot="s">
                        {{getreAge(s.row.customerRelatives.reBirthday)}}
                    </template>
                </el-table-column>
                <el-table-column prop="customerRelatives.reRelationship" label="与户主关系"></el-table-column>
                <el-table-column prop="customerRelatives.reTypeId" label="身份证号"></el-table-column>
                <el-table-column prop="customerRelatives.reAddress" label="户口所在地"></el-table-column>
            </el-table>-->

            <!--<p>现宅基地及农房情况</p>
            <el-table :data="shoudata" border>
                <el-table-column prop="bbuiltAreas" label="宅基地面积"></el-table-column>
                <el-table-column prop="bareas" label="建筑面积"></el-table-column>
                <el-table-column prop="bareasAddres" label="地址"></el-table-column>
                <el-table-column prop="bland" label="地类"></el-table-column>
                <el-table-column prop="bfour" label="四至"></el-table-column>
            </el-table>
            <el-table :data="shoudata" border>
                <el-table-column prop="bbuilding" label="建房类型"></el-table-column>
                <el-table-column prop="bhousing" label="住房建筑面积"></el-table-column>
                <el-table-column prop="bnumber" label="建筑层数"></el-table-column>
                <el-table-column prop="bheight" label="建筑高度"></el-table-column>
                <el-table-column label="是否征求相邻权利人意见">
                    <template v-slot="s">
                        {{ bopin[s.row.bopinion-1] }}
                    </template>
                </el-table-column>
            </el-table>

            <br>

            <el-table :data="shoudata" border>
                <el-table-column prop="breason" label="申请理由"></el-table-column>
            </el-table>

            <br>

            <div align="right">
                <el-button @click="shou=false">取消</el-button>
                <el-button @click.native.prevent="shouli" type="success">受理</el-button>
                <el-button @click.native.prevent="bushouli" type="danger">不予受理</el-button>
            </div>
        </el-dialog>-->

       <!-- <el-dialog title="受理" :visible.sync="qrsl">
            <el-form label-width="100px">
                <el-form-item label="操作备注">
                    <el-col :span="8">
                        <el-input v-model="byte.bapprovalComments"></el-input>
                    </el-col>
                </el-form-item>
            </el-form>
            <div align="right">
                <el-button @click="qrsl=false">取消</el-button>
                <el-button @click.native.prevent="querenshouli" type="success">受理</el-button>
            </div>
        </el-dialog>-->

        <!--<el-dialog title="不予受理" :visible.sync="bsl">
            <el-form label-width="100px">
                <el-form-item label="操作备注">
                    <el-col :span="8">
                        <el-input v-model="byte.bapprovalComments"></el-input>
                    </el-col>
                </el-form-item>
            </el-form>
            <div align="right">
                <el-button @click="bsl=false">取消</el-button>
                <el-button @click.native.prevent="burangshouli" type="danger">不予受理</el-button>
            </div>
        </el-dialog>-->

        <!--<el-dialog title="村民小组讨论公示" :visible.sync="gs" :close-on-click-modal="false">
            <el-form label-width="100px">
                <el-form-item label="讨论会议记录">
                    <el-col :span="8">
                        <el-input v-model="byte.bvillageRecord"></el-input>
                    </el-col>
                </el-form-item>
                &lt;!&ndash; 上传文件 &ndash;&gt;
                <el-form-item label="讨论结果">
                    <el-upload
                            class="upload-demo"
                            action="http://localhost:8082/upload"
                            :before-remove="beforeRemove"
                            :on-success="handleAvatarSuccess"
                            multiple
                            :limit="3"
                            :on-exceed="handleExceed">
                        <el-button size="small" type="primary">点击上传</el-button>
                        <div slot="tip" class="el-upload__tip">只能上传.doc 、.docx 、.pdf 格式文件，文件不能超过1M</div>
                    </el-upload>
                </el-form-item>
            </el-form>
            <div align="right">
                <el-button @click="gs=false">取消</el-button>
                <el-button @click.native.prevent="shangchuan" type="success">上传</el-button>
            </div>
        </el-dialog>-->

       <!-- <el-dialog title="村级组织审查" :visible.sync="sc" :close-on-click-modal="false">
            <el-form label-width="100px">
                <el-form-item label="填写审查意见">
                    <el-col :span="8">
                        <el-input v-model="byte.breviewComments"></el-input>
                    </el-col>
                </el-form-item>
            </el-form>
            <div align="right">
                <el-button @click="sc=false">取消</el-button>
                <el-button @click.native.prevent="upshencha" type="success">审查通过</el-button>
                <el-button @click.native.prevent="bushouli" type="danger">不予受理</el-button>
            </div>
        </el-dialog>-->

        <el-dialog title="农业部门，自然部门审查" :visible.sync="ny" :close-on-click-modal="false">
            <el-form label-width="100px">
                <el-form-item label="农业部门意见">
                    <el-col :span="8">
                        <el-input v-model="byte.bagricultureComments"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="资源部意见">
                    <el-col :span="8">
                        <el-input v-model="byte.bnaturalComments"></el-input>
                    </el-col>
                </el-form-item>
            </el-form>
            <div align="right">
                <el-button @click="ny=false">取消</el-button>
                <el-button @click.native.prevent="upshenban" type="success">上传</el-button>
            </div>
        </el-dialog>

       <!-- <el-dialog title="审批" :visible.sync="sp" :close-on-click-modal="false">
            <el-form label-width="100px">
                <el-form-item label="乡镇政府意见">
                    <el-col :span="8">
                        <el-input v-model="byte.btownshipComments"></el-input>
                    </el-col>
                </el-form-item>
            </el-form>
            <div align="right">
                <el-button @click="sp=false">取消</el-button>
                <el-button @click.native.prevent="upshenpi" type="success">审批</el-button>
            </div>
        </el-dialog>-->



        <!--分页-->
        <div align="center">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageNum"
                    :page-sizes="[2, 3, 4, 5, tableData.length]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="tableData.length"
            >
            </el-pagination>
        </div>

    </div>
</template>

<script>

    export default {
        data() {
            return {
                pageNum: 1,
                pageSize: 2,

                byte:{},
                loginInfo:{
                },

                tableData: [],
                shoudata:[],
                Text: [
                    "待受理",
                    "待公示",
                    "待审查",
                    "联审联办",
                    "待审批",
                    "已办完",
                    "不予受理",
                ],
                Text2:[
                   "出租",
                   "转让",
                ],
                sex:["女","男"],
                bopin:["征求","未征求"],
                shou:false,

                gs:false,
                sc:false,
                qrsl:false,
                bsl:false,
                ny:false,
                sp:false

            };
        },

        //预加载
        created() {
            this.queryemp();
            this.showUser();
            this.loadData();
        },
        methods: {
            //分页
            handleSizeChange(pageSize) {
                this.pageSize = pageSize;
            },
            handleCurrentChange(pageNum) {
                this.pageNum = pageNum;
            },
            /*//上传文件
            handleAvatarSuccess(res, file) {
                console.log(res.data.url)
                this.byte.bvillageRecord = res.data.url;
                console.log(this.byte.bvillageRecord)

            },*/
            // handleExceed(files, fileList) {
            //     this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
            // },
            // beforeRemove(file, fileList) {
            //     return this.$confirm(`确定移除 ${ file.name }？`);
            // },
            showUser() {
                if (sessionStorage.getItem('tokenUser')) {
                    this.loginInfo = JSON.parse(sessionStorage.getItem('tokenUser'))
                } else if (sessionStorage.getItem('tokenCust')) {
                    this.loginInfo = JSON.parse(sessionStorage.getItem('tokenCust'))
                }
                //this.loginInfo = JSON.parse(window.sessionStorage.getItem('tokenCust'))
                console.log(this.loginInfo.roleId)

            },
            queryemp() {
                //console.log(this.loginInfo.roleId)
                this.byte.roleId = this.loginInfo.roleId
                this.loadData()
                // this.queryemp={}
            },
            loadData() {
                console.log(this.loginInfo.roleId)
                this.byte.roleId = this.loginInfo.roleId
                this.postRequest("/house/lease/leaselist", this.byte)
                    .then((res) => {
                        console.log(res.data.list);
                        this.tableData = res.data.list
                    })
                    .catch((res) => {
                        console.log("出错了");
                        console.log(res);
                    });
            },
            /*sl(row){
                //console.log(row.bid);
                //this.shoudata=row.bname
                this.shou = true
                this.byte=row

                this.postRequest("/house/building/bytelist",this.byte)
                    .then((res) => {
                        //console.log(res.data);
                        this.shoudata=res.data.bytelist
                    })
                    .catch((res) => {
                        console.log("出错了");
                        console.log(res);
                    });
            },*/
            /*shouli(){
                this.qrsl=true
            },*/
            /*querenshouli(){
                this.putRequest('/house/building/shouli',this.byte)
                    .then(res=>{
                        this.shou=false
                        this.qrsl=false
                        this.loadData()
                    })
                    .catch(res=>{
                        console.log('出错');
                        console.log(res)
                    })
            },*/

            /*gongshi(row){
                //console.log(row.bid);
                this.gs=true
                this.byte=row
            },*/
            /*shangchuan(){
                console.log(this.byte.bvillageRecord)
                this.putRequest('/house/building/upgongshi',this.byte)
                    .then(res=>{
                        this.gs=false
                        this.loadData()
                    })
                    .catch(res=>{
                        console.log('出错');
                        console.log(res)
                    })
            },
*/
            /* shencha(row){
                this.sc=true
                this.byte=row
            },*/
            /*upshencha() {
                // this.putRequest('/house/building/upshencha',this.byte)
                //.then(res=>{
                this.sc = false
                this.loadData()
                //})
                /!* .catch(res=>{
                        console.log('出错');
                        console.log(res)
                    })
                    *!/
            },*/

                lianshen(){
                this.ny=true
                this.byte=row
            },
                upshenban(){
                //this.putRequest('/house/building/upshenban',this.byte)
                    //.then(res=>{
                        this.ny=false
                        this.loadData()
                   // })
                    /*.catch(res=>{
                        console.log('出错');
                    console.log(res)
                })*/
            },

                /*shenpi(row){
                this.sp=true
                this.byte=row
            },*/
                /*upshenpi(){
                this.putRequest('/house/building/upshenpi',this.byte)
                    .then(res=>{
                        this.sp=false
                        this.loadData()
                    })
                    .catch(res=>{
                        console.log('出错');
                        console.log(res)
                    })
            },*/

                /*bushouli(){
                this.bsl=true
            },*/
                /* burangshouli(){
                this.putRequest('/house/building/bushouli',this.byte)
                    .then(res=>{
                        this.shou=false
                        this.bsl=false
                        this.sc=false
                        this.loadData()
                    })
                    .catch(res=>{
                        console.log('出错');
                        console.log(res)
                    })
            },*/


                /* getAge(bbirthday){
                // let birthdays = new Date(出生日期.replace(/-/g, "-或者/，根据日期格式选择"));
                let birthdays = new Date(bbirthday.replace(/-/g, "/"));
                let d = new Date();
                let age =
                    d.getFullYear() -
                    birthdays.getFullYear() -
                    (d.getMonth() < birthdays.getMonth() ||
                    (d.getMonth() == birthdays.getMonth() &&
                        d.getDate() < birthdays.getDate())
                        ? 1
                        : 0);
                return age
            },*/
                /*  getreAge(reBirthday){
                // let birthdays = new Date(出生日期.replace(/-/g, "-或者/，根据日期格式选择"));
                let birthdays = new Date(reBirthday.replace(/-/g, "/"));
                let d = new Date();
                let reage =
                    d.getFullYear() -
                    birthdays.getFullYear() -
                    (d.getMonth() < birthdays.getMonth() ||
                    (d.getMonth() == birthdays.getMonth() &&
                        d.getDate() < birthdays.getDate())
                        ? 1
                        : 0);
                return reage
            }
        },*/
            }

    };
</script>

<style>

    .one {
        border-style: solid;
        border-width: 1px;
        border-color: rgb(189, 187, 187);
    }
    .demo-form-inline{
        border-style: solid;
        border-width: 1px;
        border-color: rgb(189, 187, 187);
    }
</style>